<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>Comments &laquo; Admin</title>
  <link rel="stylesheet" href="../static/assets/vendors/bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="../static/assets/vendors/font-awesome/css/font-awesome.css">
  <link rel="stylesheet" href="../static/assets/vendors/nprogress/nprogress.css">
  <link rel="stylesheet" href="../static/assets/css/admin.css">
  <script src="../static/assets/vendors/nprogress/nprogress.js"></script>
</head>
<body>
  <script>NProgress.start()</script>

  <div class="main">
    <nav class="navbar">
      <button class="btn btn-default navbar-btn fa fa-bars"></button>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="profile.php"><i class="fa fa-user"></i>个人中心</a></li>
        <li><a href="login.php"><i class="fa fa-sign-out"></i>退出</a></li>
      </ul>
    </nav>
    <div class="container-fluid">
      <div class="page-title">
        <h1>所有评论</h1>
      </div>
      <!-- 有错误信息时展示 -->
      <!-- <div class="alert alert-danger">
        <strong>错误！</strong>发生XXX错误
      </div> -->
      <div class="page-action">
        <!-- show when multiple checked -->
        <div class="btn-batch" style="display: none">
          <button class="btn btn-info btn-sm">批量批准</button>
          <button class="btn btn-warning btn-sm">批量拒绝</button>
          <button class="btn btn-danger btn-sm">批量删除</button>
        </div>
        <ul class="pagination pagination-sm pull-right">
          <li><a href="#">上一页</a></li>
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">下一页</a></li>
        </ul>
      </div>
      <table class="table table-striped table-bordered table-hover">
        <thead>
          <tr>
            <th class="text-center" width="40"><input type="checkbox"></th>
            <th>作者</th>
            <th>评论</th>
            <th>评论在</th>
            <th>提交于</th>
            <th>状态</th>
            <th class="text-center" width="100">操作</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>
  </div>

  <div class="aside">
    <div class="profile">
      <img class="avatar" src="../static/uploads/avatar.jpg">
      <h3 class="name">布头儿</h3>
    </div>
    <ul class="nav">
      <li>
        <a href="index.php"><i class="fa fa-dashboard"></i>仪表盘</a>
      </li>
      <li>
        <a href="#menu-posts" class="collapsed" data-toggle="collapse">
          <i class="fa fa-thumb-tack"></i>文章<i class="fa fa-angle-right"></i>
        </a>
        <ul id="menu-posts" class="collapse">
          <li><a href="posts.php">所有文章</a></li>
          <li><a href="post-add.php">写文章</a></li>
          <li><a href="categories.php">分类目录</a></li>
        </ul>
      </li>
      <li class="active">
        <a href="comments.php"><i class="fa fa-comments"></i>评论</a>
      </li>
      <li>
        <a href="users.php"><i class="fa fa-users"></i>用户</a>
      </li>
      <li>
        <a href="#menu-settings" class="collapsed" data-toggle="collapse">
          <i class="fa fa-cogs"></i>设置<i class="fa fa-angle-right"></i>
        </a>
        <ul id="menu-settings" class="collapse">
          <li><a href="nav-menus.php">导航菜单</a></li>
          <li><a href="slides.php">图片轮播</a></li>
          <li><a href="settings.php">网站设置</a></li>
        </ul>
      </li>
    </ul>
  </div>

  <script src="../static/assets/vendors/jquery/jquery.js"></script>
  <script src="../static/assets/vendors/bootstrap/js/bootstrap.js"></script>
  <script>NProgress.done()</script>
  <script src="../static/assets/vendors/art-template/template-web.js"></script>
  <!-- 引入分页的插件 -->
  <script src="../static/assets/vendors/twbs-pagination/jquery.twbsPagination.js"></script>
 <!--    // var currentPage = 1;
    // var pageSize = 10;
    // var pageCount =5;
//     var statusData = {
//         held : "待审核",
//         approved : "准许",
//         rejected : "拒绝",
//         trashed : "回收站"
// }; -->
<!-- function makePageButton(){
//     // 根据当前页计算出开始的页码和结束的页码
//     //开始页码 = 当前页码 - 
//     var start = currentPage -2;
//     //如果开始页码数小于1的强制从1开始
//     if(start <1){
//       start =1;
//     }
//     结束页码 = 开始页码 + 4
//       var end = start + 4;
//    如果结束的页码数超过的页码总数，特殊处理：
//       if( end > pageCount ){
//         end = pageCount;
//       }
//     //生成动态页码
//       var html ="";
//       //判断当前是不是第一页
//       if(currentPage !=1){
//         //使用自定义属性记录按钮代表的页数
//         html += '<li class="item" data-page="'+ (currentPage - 1) +'"><a href="javascript:;">上一页</a></li>';
//       }
//       //循环生成5个数字按钮
//       for (var i = start; i <= end; i++) {
//         if (i==currentPage) {
//          html += '<li class="item active" data-page="'+ i +'"><a href="javascript:;">'+ i +'</a></li>'
//         }else{
//            html += '<li class="item" data-page="'+ i +'"><a href="javascript:;">'+ i +'</a></li>';
//             }
//         }
//       //判断当前是否最后一页
//       if(currentPage !=pageCount){
//           html += '<li class="item" data-page="'+ (currentPage + 1) +'"><a href="javascript:;">下一页</a></li>';
//       }
//       $(".pagination").html(html);
}   -->
<!-- // makeTable();  
// function makeTable(){
// //一开始就加载数据， 分页显示
//       $.ajax({
//         url : "api/_getCommentsData.php",
//         type : "POST",
//         data : {currentPage : currentPage, pageSize : pageSize},
//         success : function(res){
//           if(res.code == 1){
//             var data = res.data;
//             //遍历数组，生成结构
//             $.each(data, function(i, e){
//               var html = `<tr class="danger">
//                   <td class="text-center"><input type="checkbox"></td>
//                   <td>${e.author}</td>
//                   <td>${e.content}</td>
//                   <td>${e.title}</td>
//                   <td>${e.created}</td>
//                   <td>${statusData[e.status]}</td>
//                   <td class="text-center">
//                     <a href="post-add.php" class="btn btn-info btn-xs">批准</a>
//                     <a href="javascript:;" class="btn btn-danger btn-xs">删除</a>
//                   </td>
//                 </tr>`;
//               $(html).appendTo("tbody");
//             });
//           }
//         }
//       });
// }; -->
  

<script id="template" type="text/art-template">
    {{each $data val}}
      <tr>
        <td class="text-center"><input type="checkbox"></td>
        <td>{{val.author}}</td>
        <td style="width:400px;">{{val.content}}</td>
        <td>{{val.title}}</td>
        <td>{{val.created}}</td>
        <td>
          {{if val.status == "held"}}
            未审核
          {{else if val.status == "approved"}}
            已准许
          {{else if val.status == "rejected"}}
            已拒绝
          {{else if val.status == "trashed"}}
            已删除
          {{/if}}
        </td>
        <td class="text-center">
          <a href="post-add.php" class="btn btn-warning btn-xs">驳回</a>
          <a href="javascript:;" class="btn btn-danger btn-xs">删除</a>
        </td>
      </tr>
    {{/each}}
  </script>
  <script>
$(function(){
    var currentPage = 1;
    var pageSize = 10;
    var pageCount;
    getCommentsData();
function getCommentsData(){
     $.ajax({
     url:"api/_getCommentsData.php",
     type:"POST",
     data:{currentPage: currentPage, pageSize : pageSize},
     success: function(res){
       //如果请求成功把数据动态渲染出来
       if (res.code ==1) {
        var data = res.data;
       // 更新一下pageCount
              pageCount = res.pageCount;
         //遍历data数组，生成表格结构
         var html = template("template",data);
         $("tbody").html(html);
              
                // 完成分页效果

                //   插件：
                //     1 先引入插件  twbs-pagination
                //     2 使用样式，可以是bootstrap提供的样式，也可以是自己的样式
                //     3 要有一个可以调用函数的标签 可以ul，也可以是div
                //     4 调用 twbsPagination 完成分页效果
            
          $(".pagination").twbsPagination({
                totalPages: pageCount, //最大的页码数
                visiblePages: 7, // 总共显示多少个分页按钮
                first :"首页",
                prev : "上一页",
                next :">>",
                last :">>|",
                pageClass :"item",
                onPageClick: function (event, page){  // 点击每个按钮的时候执行的操作
                  //回调函数有两个参数，第一个是事件对象，第二个是当前的页码数
                  currentPage = page;
                  //每次点击分页的按钮，也要获取数据
                  getCommentsData();
                }
              });
       }
       } 
          })
}
})
//使用模板完成分页结构



  </script>

</body>
</html>
